<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue2-class&style</title>
    <script src="../vue2.js"></script>
    <style>
        .aa{

        }
        .bb{

        }
        .cc{

        }
        .dd{

        }
    </style>
</head>
<body>
<div id="box">
    <div :class="classObj">动态切换class-1.对象</div>
    <div :class="classArr">动态切换class-2.数组</div>

    <div :style="styleObj">动态切换style-1.对象</div>
    <div :style="styleArr">动态切换style-2.数组</div>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#box',
        data:{
            classObj:{
                aa: true,
                bb: true,
                cc: false,
            },
            classArr: ['aa','bb'],   //使用数组方法时，Vue将会重启数组方法，所以除了实现原始数组方法的功能外，也重新拦截、更新

            styleObj:{
                backgroundColor: 'red'
            },
            styleArr: [{backgroundColor: 'yellow'}]
        }
    })

    //Vue2 无法监听某个对象的属性被临时加上，需要用Vue.set(对象，'属性'，值)，进行重新拦截添加,而且只需拦截一次即可
    //Vue3 支持动态增加属性的拦截
</script>
</html>